jQuery: It’s a beautiful framework

I’ve been using jQuery for more than 4 months now, and I love it more and more.

Through out my career I went through Prototype + Scriptaculous, brief Mochikit, MooTools, and now jQuery. But this post is not about jQuery is super awesome and other framework sucks. It’s about why I really like jQuery so much.

jQuery helps me understand Javascript.

Even though I’ve been doing web development for a while, I felt like there were still holes in my brain about javascript. There were a lot of non-obvious little things like:

• What callback function takes as arguments. (inside AJAX its data; Inside element it could be element or event; etc.)
• Functions Scope. (I didn’t realize that, because of function is first-class, javascript scoping is similar to Python)
• What unobtrusive truly means. (If the web app lost functionalities when javascript is turned off, then its obtrusive)
• What is the best practice for binding/unbinding events.

Because I didn’t have above (basic) questions answered, it’s hard for me to appreciate framework(s) that monkey-patch global objects. That’s the same reason it took a while for me to get used to Rails.

jQuery solves my complains about Javascript

Javascript language is truly verbose, akin to java. IMHO, verbosity really kills scripting language, especially while typing in interactive console.

I can only type so much of these (example):

var domElem = document.getElementsByName(‘someClassName’);

for( var i in domElem ) { console.log(domElem.class) }

In jQuery, it becomes:

$(“.someClassName”).each( function(i) { console.log(i.class) })

Such conciseness is why I like Python and Ruby and jQuery. Shorter code allows me to see what truly important.

jQuery makes being unobtrusive Easy

ready(), click(), bind(), unbind(), and more truly makes being unobtrusive super easy.

I can achieve unobtrusiveness by placing javascript logic at the end of base view/template file (Example):

<script>

$(document).ready(function() {

$(“.someDomClass”).click(function(e) {

// Do some stuff

e.preventDefault();

})

})

</script>

Above technique is common place now, but jQuery makes it concise and easier to debug.

Conclusion: jQuery is awesome and worthwhile investment, for my career and for fun.

Javascript on Firefox 3 Slice Bug

See the code below:

container = ['localhost:8080', 'aaaaaaaaa', 'history']
for(var i in container)
{
console.log(container[i]);
console.log(container.slice(0,i+1));
}

The Firebug output is below:

localhost:8080
["localhost:8080"]
aaaaaaaaa
["localhost:8080", "aaaaaaaaa", "history"]
history
["localhost:8080", "aaaaaaaaa", "history"]


Notice the problem there? When i == 1, why slice() output is not:
["localhost:8080", "aaaaaaaaa"] ??????

I cannot explain why this is happening and yes… I have refreshed my browser multiple times.

Reference:

Mozilla Developer Center :: Slice

SquirrelFish Extreme: WebKit’s new Javascript Engine

On September 18th, 2008, the WebKit team announce SquirrelFish Extreme(SFX), their next generation javascript engine.

Based on SunSpider benchmark, SFX is 35% faster than V8, Google Chrome’s glorified javascript engine. See below:

 

 

References:

• WebKit announcement
• Charles Ying compiles a few more comparisons

Javascript Shells

For those developing Javascript, It helps a bunch to have javascript shell/console. For other browsers besides Firefox, you can use these:

• http://www.squarefree.com/shell/shell.html
• http://mochikit.com/examples/interpreter/

Now I know why I like Mochikit

Before, I really don’t care much about Javascript frameworks. They all do kind of the same thing and they all works.

Well, Prototype + Scriptaculous are serious pain in the neck, but I’ve moved on. I guess many Javascript developers have moved on from those two as well.

I still like Mootools. Their website is always so sexy, and the documentation is always clear. (+ 654768864 points for Mootools)

But I now know why I like Mochikit better:

“Mochikit does not mess with Base Object properties.”

Mochikit is simply a library of useful functions. Functions that make Javascript development more pleasant, and I like that.

Side Notes:

• I never used Dojo, so I don’t know anything about them. That being said, Dojo is massive! 4.1 Mb of tar.gz file.
• GWT doesn’t count in my preference list, because it’s a JAVA library that writes Javascript. Not my cup of tea.

References:

• Mochikit Documentation
• Mootools Documentation
• Prototype Documentation
• Scriptaculous Documentation
• Dojo Documentation
• GWT Documentation

Javascript: Array.sort()

What is it?

It is a global function that’s a built-in of Array object.

Syntax:

Array.sort(comparisonFunction);

How to use sort():

• If sort function is being used without comparisonFunction parameter, the values inside array will first be converted into string, and sorted lexically.
• If sort function is used with comparisonFunction, it must return either 1, 0, or -1 depending on the comparison.

Here is a sample of comparisonFunction:

function compare(a, b)

{

if ( a < b ) { return -1; }

else if ( a > b ) { return 1; }

else () { return 0; }

}

Reference:

http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:sort

Flickr Backend

Early Flickr:

Flickr Architecture:

Holy Cow! Transport Tycoon in Javascript?!

Well… not quite the whole game, but the demo itself is impressive!

Check it out!

Furthermore, the tool that allows the developer to achieve Transport Tycoon in browser is intriguing.

It’s called JSC. This open source project compiles c# code to javascript.

I’m not qualified to comment on MSFT technology, but JSC compiler seemed to work at low level. Interesting…

References:

• Transport Tycoon Javascript Demo
• JSC Sourceforge

Implicit Javascript Variables

These are javascript variables that I often forget existed because they are implicit but nonetheless very useful.

I’m putting them here just so that I won’t forget anymore. Hope readers found them useful as well.

Arguments, it is a local variable exists in all functions. Based on MozDev documentation, arguments object is not an array. It is similar to an array, but does not have any array properties except length. For example, it does not have the pop method. However it can be converted to array object via:

var args = Array.prototype.slice.call(arguments);

Arguments object is available only within a function body. Attempting to access Arguments object outside a function declaration results in an error.

Function Names, when creating a function using “function declaration”, for example:

function iamawesome() { return 5; }

a variable called iamawesome is created implicitly. Thus, you can pass around function as a variable (callback to be exact).

References:

MozDev Functions:Arguments

Function constructor vs Function declaration vs Function expression

This is 1 topic that I usually take for granted but never really quite “gets” it.

A function can be defined with Function Constructor assigned to variable. Example:

var multiply = new Function(“x”, “y”, “return x * y;”);

Function Declaration is typically used to define a function. Example:

function multiply(x, y) {

return x * y;

}

Function Expression, without name, can also be used to define a function to variable. Example:

var multiply = function(x, y) {

return x * y;

}

Function Expression can also be assigned a name. Example:

var multiply = function func_name(x, y) {

return x * y;

}

What exactly the differences between all those? Not much. But there are quite a number of trivia that I need to remember from now on.

Function Constructor (i.e. new Function(a, b, c)) is parsed EVERY TIME javascript is evaluated. Bad! Real bad! In contrast, Function Declaration and Function Expression are only parsed 1 time.

Obviously function name defined by Function Expression/Function Declaration cannot be changed, while the variable, to which the function is assigned to, can be manipulated/reassigned.

Function name defined by Function Expression can be used only inside the function body. Meanwhile, Function Declaration CREATES a variable with the same name as the function name. Thus, unlike Function Expression, Function Declaration can be accessed by its name in the scope they were defined in. Example:

var y = function x() {};

alert(x); // throws an error because the name “x” is not accessible outside the function

function x() {}

alert(x); // outputs x serialized into a string. It works.

Function Declaration automatically becomes Function Expression when it is defined inside conditional loop.

Trivia:

• Every function contains Arguments array-like object.

Reference:

Mozilla Development Center – Functions